<template>
  <div class="media-music">
    <v-data-table
      :headers="headers"
      :items="musics"
      hide-default-footer
      class="elevation-1"
    >
      <template v-slot:item.action>
        <v-row justify="center">
          <v-btn icon fab small>
            <v-icon>mdi-play</v-icon>
          </v-btn>
        </v-row>
      </template>
    </v-data-table>
  </div>
</template>

<script>
export default {
  name: "MediaMusic",
  data() {
    return {
      headers: [
        { text: "", value: "action", sortable: false },
        { text: "歌曲标题", value: "title" },
        { text: "时长", value: "duration" },
        { text: "歌手", value: "singer" },
        { text: "专辑", value: "album" }
      ],
      musics: [
        { title: "测试", duration: "01:30", singer: "测试", album: "测试" },
        { title: "测试q", duration: "01:30", singer: "测试", album: "测试" },
        { title: "测试w", duration: "01:30", singer: "测试", album: "测试" },
        { title: "测试e", duration: "01:30", singer: "测试", album: "测试" },
        { title: "测试r", duration: "01:30", singer: "测试", album: "测试" }
      ]
    };
  }
};
</script>

<style scoped>
.media-music {
  width: 100%;
  height: 100%;
}
</style>
